<template>
  <view>
    <view class="goods-list">
      <block v-for="(product, index) in productList" :key="index">
        <view class="goods-item" @click="gotoProductDetail(product)">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image
              :src="product.goods_small_logo || defaultImage"
              class="goods-pic"
            ></image>
          </view>

          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{ product.goods_name }}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price"
                >￥{{ product.goods_price | formatNum }}</view
              >
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false,
      defaultImage:
        "https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png",
      // 请求参数对象
      params: {
        // 1. 查询关键词
        query: "",

        // 2. 分类Id
        cid: "",

        // 3. 页码
        pagenum: 1,

        // 4. 每页条数
        pagesize: 20,
      },
      // 商品数据
      productList: [],

      // 商品数据总条数，用来实现分页
      total: 0,
    };
  },
  onLoad(options) {
    if (!options) {
      uni.switchTab({
        url: "pages/home/home",
      });
    }
    this.params.query = options.query || "";
    this.params.cid = options.cid || "";
    // 调用获取商品列表数据的方法
    this.getProductList();
  },
  // filters: {
  //   formatNum(value) {
  //     return Number(value).toFixed(2);
  //   },
  // },
  methods: {
    // 获取商品列表数据的方法
    async getProductList() {
      // 打开节流阀
      this.isLoading = true;
      const { meta, message } = await this.$http.get(
        "/goods/search",
        this.params
      );

      // 请求失败处理
      if (meta.status !== 200) {
        return this.$msg();
      }

      // 在原有数据的后面添加新获取到的数据
      this.productList = [...this.productList, ...message.goods];
      this.total = message.total;
      // 关闭节流阀
      this.isLoading = false;
    },
    onReachBottom() {
      // 判断是否还有数据?
      if (this.productList.length === this.total) {
        return this.$msg("我是有底线的！所有商品数据已加载完毕！");
      }
      // 判断是否正在请求其它数据，如果是则不发起额外的请求
      if (this.isLoading) {
        return;
      }
      // 页码加 1
      this.params.pagenum += 1;

      // 请求数据
      this.getProductList();
    },
    // 下拉刷新的事件
    async onPullDownRefresh() {
      // 1. 重置关键数据
      this.params.pagenum = 1;
      this.productList = [];

      // 2. 重新发起请求
      await this.getProductList();

      // 3. 关闭下拉刷新效果
      uni.stopPullDownRefresh();
    },
    // 跳转到商品详情页
    gotoProductDetail(product) {
      uni.navigateTo({
        url: `/pages_sub1/product-detail/product-detail?pid=${product.goods_id}`,
      });
    }
  },
};
</script>

<style scoped lang="scss">
.goods-item {
  display: flex;
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .goods-item-left {
    margin-right: 10rpx;

    .goods-pic {
      width: 200rpx;
      height: 200rpx;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
    }

    .goods-price {
      font-size: 32rpx;
      color: #c00000;
    }
  }
}
</style>